import React, { useRef,MutableRefObject, useEffect } from "react";
import * as echarts from 'echarts';

import { IProps } from './type';

const Index:React.FC<IProps> = function(props) {

    const chartRef:any = useRef();
    useEffect(() => {
        let myCharts = echarts.init(chartRef);
        let option = {
            title: {
              text: `${props.title}表`
            },
            tooltip: {},
            legend: {
              data: [props.title]
            },
            xAxis: {
              data: props.xData
            },
            yAxis: {},
            series: [
              {
                name: props.title,
                type: props.type,
                data: props.seriesData
              }
            ]
          }
        myCharts.setOption(option);
    },[props]) 

    return (
        <div ref={chartRef} className="chart"> </div>
    )
}


export default Index;